<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" +
			request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>列表</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
	<link rel="stylesheet" href="<%=basePath%>static/css/font.css">
	<link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
	<link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
	<script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>static/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="<%=basePath%>static/js/jqPaginator.js"></script>
	<script type="text/javascript" src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
	<script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">恢复用户</a>
      </span>
	<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
	   href="javascript:location.replace(location.href);" title="刷新">
		<i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
	<div class="layui-row">
		<form class="layui-form layui-col-md12 x-so">
			<input type="text" id="inputUserAccount" name="inputUserAccount" placeholder="请输入账号" autocomplete="off" class="layui-input">
			<button class="layui-btn" type="button" onclick="queryUsrByUserAccount()"><i class="layui-icon">&#xe615;</i></button>
		</form>
	</div>

	<xblock>
		<span class="x-right" style="line-height:40px" >共有数据：<span id="total_data"></span>条</span>
	</xblock>
	<table class="layui-table">
		<thead>
		<tr>
			<th>序号</th>
			<th>账号</th>
			<th>密码</th>
			<th>姓名</th>
			<th>爱好</th>
			<th>电话</th>
			<th>权限</th>
			<th>操作</th>
		</tr>
		</thead>
		<tbody id="tab"></tbody>
		<tr id="paging">
			<td colspan="8" align="center">
				<ul class="pagination" id="pagination1"></ul>
			</td>
		</tr>
	</table>
</div>
<script>
    //总页数，总条数，当前页
    var totalPages=0;
    var totalCounts=0;
    var currentPage=0;
    $(document).ready(function () {
        //第一次访问初始化页面
        showPage(-1);
        $("#pagination1").jqPaginator({
            //赋值
            totalPages:totalPages,
            totalCounts:totalCounts,
            currentPage:currentPage,
            first:"<li class='first'><a href='javascript:void(0);'>首页</a></li>",
            prev:"<li class='prev'><a href='javascript:void(0);'>上一页</a></li>",
            next:"<li class='next'><a href='javascript:void(0);'>下一页</a></li>",
            last:"<li class='last'><a href='javascript:void(0);'>末页</a></li>",
            page:"<li class='page'><a href='javascript:void(0);'>{{page}}</a></li>",
            onPageChange:function (num) {
                showPage(num);
            }
        })
    })

    //显示用户
    function showPage(n) {
        $.ajax({
            url:"<%=basePath%>user/queryUserByState",
            dataType:"json",
            type:"post",
            async:false,
            data:{"pageNum":n,"pageSize":5},
            success:function (data) {
                if(n===-1){
                    totalPages=data.pages;
                    totalCounts=data.total;
                    currentPage=data.pageNum;
                }
                //定义一个空字符串，用于数据拼接
                var str="";
                var list=data.list;
                if(list.length>0){
                    for (var i = 0; i <list.length; i++) {
                        str+="<tr>"+
                            "<td>"+((data.pageNum-1)*5+i+1)+"</td>"+
                            "<td hidden>"+list[i].id+"</td>"+
                            "<td>"+list[i].userAccount+"</td>"+
                            "<td>"+list[i].userPassword+"</td>"+
                            "<td>"+list[i].userName+"</td>"+
                            "<td>"+list[i].userHobby+"</td>"+
                            "<td>"+list[i].userPhone+"</td>"+
                            "<td>"+list[i].userRole+"</td>"+
                            '<td><button type="button" onclick="changeState(' +"'"+ list[i].userAccount+"'" + ')"><i class="layui-icon">&#xe669;</i></button></td>' +
                            "</tr>";
                    }
                    $("#total_data").html(data.total);//显示数据总个数
                    $("#tab").html(str);
                }else{
                    $("#total_data").html(0);//数据总数显示
                    $("#tab").html("<tr><td colspan='8' align='center'>你查询的数据不存在,请添加数据</td></tr>");
                    $("#paging").hide();//没有数据时隐藏按钮
                }
            },
            error:function () {
                alert("服务器错误");
            }
        })
    }

    //模糊查询用户列表
    function queryUsrByUserAccount() {
        var userAccount=$("#inputUserAccount").val();
        if(userAccount==null||userAccount==""){
            alert("请输入查询内容");
            return;
        }
        //第一次访问初始化页面
        showUser(-1,userAccount);
        $("#pagination1").jqPaginator({
            //赋值
            totalPages:totalPages,
            totalCounts:totalCounts,
            currentPage:currentPage,
            first:"<li class='first'><a href='javascript:void(0);'>首页</a></li>",
            prev:"<li class='prev'><a href='javascript:void(0);'>上一页</a></li>",
            next:"<li class='next'><a href='javascript:void(0);'>下一页</a></li>",
            last:"<li class='last'><a href='javascript:void(0);'>末页</a></li>",
            page:"<li class='page'><a href='javascript:void(0);'>{{page}}</a></li>",
            onPageChange:function (num) {
                showUser(num,userAccount);
            }
        })
    }
    function showUser(n,userAccount) {
        $.ajax({
            url:"<%=basePath%>user/queryUserByStateByAccount",
            dataType:"json",
            type:"post",
            async:false,
            data:{"pageNum":n,"pageSize":5,"userAccount":userAccount},
            success:function (data) {
                if(n===-1){
                    totalPages=data.pages;
                    totalCounts=data.total;
                    currentPage=data.pageNum;
                }
                //定义一个空字符串，用于数据拼接
                var str="";
                var list=data.list;
                if(list.length>0){
                    $("#paging").show();
                    for (var i = 0; i <list.length; i++) {
                        str+="<tr>"+
                            "<td>"+(i+1)+"</td>"+
                            "<td hidden>"+list[i].id+"</td>"+
                            "<td>"+list[i].userAccount+"</td>"+
                            "<td>"+list[i].userPassword+"</td>"+
                            "<td>"+list[i].userName+"</td>"+
                            "<td>"+list[i].userHobby+"</td>"+
                            "<td>"+list[i].userPhone+"</td>"+
                            "<td>"+list[i].userRole+"</td>"+
                            '<td><button type="button" onclick="changeState(' +"'"+ list[i].userAccount+"'" + ')"><i class="layui-icon-refresh">&#xe669;</i></button></td>' +
                            "</tr>";
                    }
                    $("#total_data").html(data.total);//显示数据总个数
                    $("#tab").html(str);
                }else{
                    totalPages=1;
                    totalCounts=1;
                    currentPage=1;
                    $("#total_data").html(0);//数据总数显示
                    $("#tab").html("<tr><td colspan='8' align='center'>你查询的数据不存在,请添加数据</td></tr>");
                    $("#paging").hide();//没有数据时隐藏按钮
                }
            },
            error:function () {
                alert("服务器错误");
            }
        })
    }

    //恢复用户
    function changeState(userAccount) {
        $.ajax({
            url: "<%=basePath%>user/setStateByUserAccount",
            dataType: "json",
            type: "post",
            data: {"userAccount": userAccount},
            success: function (data) {
                if (data==="success"){
                    layer.alert("用户恢复成功",{icon:1},function () {
                        location.reload();
                    });
                }else{
                    layer.alert("用户恢复失败！！！",{icon:2},function () {
                        location.reload();
                    });
                }
            }, error: function () {
                layer.alert("服务器错误");
            }
        });
    }
</script>
</body>
</html>